<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>
      <button @click="closeWebSocket">关闭websocket连接</button>
    </div>
    <div>
      <button @click="connectIndexedDB">连接本地数据库</button>
    </div>
    <div>
      <button @click="insertIndexedDB">插入数据</button>
    </div>
    <div>
      <button @click="queryLocalAllData">查询全部</button>
    </div>
    <div>
      <button @click="getDataByIndex">通过索引查询数据</button>
    </div>
    <div>
      <button @click="deleteDB">删除数据库</button>
    </div>
    <div>
      <button @click="closeDB">关闭数据库</button>
    </div>
    <div>
      <button @click="queryLocalWindowData">条件查询</button>
    </div>
    <div>
      <button @click="deleteAll">删除所有数据</button>
    </div>
    <div>
      <button @click="deleteAllById">删除指定人员数据</button>
    </div>
    <div>
      <button @click="deleteHistoryData">删除历史消息</button>
    </div>
    <div>
      <button @click="cursorGetDataByIndexAndPage">分页查询</button>
    </div>
    <div>
      <button @click="getMessageList">获取消息列表</button>
    </div>
    <div>
      <input ref="upload" type="file" @change="changeIpt" />
    </div>
    <div>
      <input ref="text" type="text" v-model="text" />
      <button @click="sendText">发送</button>
    </div>
  </div>
</template>

<script>
import PFWebsocket from "./websocket/src/index";
import { v4 as uuidv4 } from "uuid"; // 随机生成uuid
export default {
  name: "App",
  data() {
    return {
      text: "", // 发送文本信息
      socket: null,
      options: {
        username: "", // 用户名
        password: "", // 密码
        // wsUrl: "ws://localhost:56/", // websocket地址
        httpUrl: "http://10.134.5.6:8080/", // http请求地址
        DBName: "Message", // 数据库名称
        addressBook: [], // 通讯录
      },
    };
  },
  components: {},
  mounted() {
    this.socket = new PFWebsocket(this.options, (data) => {
      console.log("消息列表", data);
    }); // 连接服务

    // 连接成功时
    this.socket.onopen((event) => {
      console.log("websocket连接成功", event.currentTarget.readyState);
      // this.socket.sendText("张三");
    });
    // 接收消息
    this.socket.onmessage((data) => {
      console.log(data);
    });
    // 连接关闭时
    this.socket.onclose((event) => {
      console.log("连接关闭", event.currentTarget.readyState);
    });
    // 连接发生错误时
    this.socket.onerror((event) => {
      console.log("连接发生错误", event);
    });
  },
  methods: {
    closeWebSocket() {
      this.socket.close();
    },

    // 上传文件
    changeIpt() {
      let inputFile = this.$refs.upload.files[0];
      this.socket.pfUpload(inputFile, (data) => {
        if (data) {
          console.log("上传文件成功", data);
        }
      });
    },
    /**************发送消息操作***************/
    sendText() {
      this.socket.sendText(this.text);
    },

    /**************数据库操作***************/
    // 连接本地数据库
    connectIndexedDB() {
      this.socket.connectDB();
    },
    // 插入数据
    insertIndexedDB() {
      let data = {
        "@type": "com.abourn.swoosh.nettyMessage.systemMessage.PingMessage",
        link: "from:to",
        messageType: 14,
        sequenceId: uuidv4().split("-").join(""),
      };
      this.socket.saveMessage("signalChat", data);
    },
    // 查询本地所有数据
    queryLocalAllData() {
      this.socket.queryLocalAllData((data) => {
        if (data) {
          console.log("查询成功", data);
        }
      });
    },
    // 删除数据库
    deleteDB() {
      this.socket.deleteDB(this.options.DBName);
    },
    // 关闭数据库
    closeDB() {
      this.socket.closeDB();
    },
    // 条件查询
    queryLocalWindowData() {
      this.socket.queryLocalWindowData("luhq1", (data) => {
        if (data) {
          console.log("条件查询成功", data);
        }
      });
    },
    // 分页查询
    cursorGetDataByIndexAndPage() {
      this.socket.cursorGetDataByIndexAndPage();
    },
    // 删除所有数据
    deleteAll() {
      this.socket.deleteAll();
    },
    // 删除指定人员数据
    deleteAllById() {
      this.socket.deleteAllById("koud");
    },
    // 删除历史消息
    deleteHistoryData() {
      this.socket.deleteHistoryData(10);
    },
    // 获取消息列表
    getMessageList() {
      this.socket.queryMessageList((data) => {
        console.log("获取的消息列表", data);
      });
    },
    // 通过索引查询数据
    getDataByIndex() {
      this.socket.getDataByIndex();
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
